<script setup>
//分页条
import {ref} from "vue";

const pageNum=ref(1)
const pageSize =ref(5)
const total =ref(20)
    const Data2 = [
      {
        date: '4',
        name: '活动名称4',
        year:'2023',
        address: '主任',
        people:'吕娟',
        add:'派发'
      },
      {
        date: '3',
        name: '活动名称4',
        year:'2023',
        address: '主任',
        people:'吕娟',
        add:'派发'
      },
      {
        date: '2',
        name: '活动名称4',
        year:'2023',
        address: '主任',
        people:'吕娟',
        add:'派发'
      },
      {
        date: '1',
        name: '活动名称4',
        year:'2023',
        address: '主任',
        people:'吕娟',
        add:'派发'
      },
    ]
    const tableData=[
      {
        id:1,
        groupName: '乔艳',
        ID:123,
        leader:'A学院',
        area: '主任',
        title:'教授',
        hometown:'湖北省',
        graduation:'武汉一中',
        number:'123456'
      },
      {
        groupName: '袁军',
        ID:123,
        leader:'A学院',
        area: '主任',
        title:'教授',
        hometown:'湖北省',
        graduation:'武汉一中',
        number:'123456'

      },
      {
        groupName: '韩娜',
        ID:123,
        leader:'A学院',
        area: '主任',
        title:'教授',
        hometown:'湖北省',
        graduation:'武汉一中',
        number:'123456'

      },
      {
        groupName: '孟娜',
        ID:123,
        leader:'A学院',
        area: '主任',
        title:'教授',
        hometown:'湖北省',
        graduation:'武汉一中',
        number:'123456'

      },


    ]
    const Data3 = [
  {
    date: '4',
    year:'2018',
    num: '8',
  },
  {
    date: '3',
    year:'2018',
    num: '8',
  },
  {
    date: '2',
    year:'2018',
    num: '8',
  },
  {
    date: '1',
    year:'2018',
    num: '8',
  },
]
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>中学管理/查看中学</span>
      </div>
    </template>
    <el-row>
      <el-col :span="2">
        <div class="erweima" >
          <img src="@/assets/img.png" class="erweima-1" style="width: 100px">
        </div>
      </el-col>
      <el-col :span="3">
        <div class="span1" style="margin-bottom: 5px">
          <span style="font-weight: 700;font-size: 17px;text-align: left;color: #000;">武汉第一中学</span>
        </div>
        <div class="span2" style="margin-bottom: 5px">
          <span style="font-weight: 400;font-size: 14px;text-align: left;color: #808080;">别称：一中</span>
        </div>
        <div class="span3" style="width: 85px;height: 19px;border-radius: 9.5px;background: #ffa225;">
          <div style="font-weight: 400;font-size: 12px;text-align: center;color: #fff;">优质生源基地</div>
        </div>
      </el-col>
      <el-col :span="18" style="margin-bottom: 20px">
        <el-row>
          <el-col :span="2">
            <div style="width: 43px;height: 43px;background: #236cff;border: 1px ;border-radius: 50%;float: right"><div style="font-weight: 700;font-size: 22px;text-align: center;padding-top: 4px;color: #fff;">组</div></div>
          </el-col>
          <el-col :span="4" style="margin-left: 8px">
            <div style="font-weight: 700;font-size: 16px;text-align: left;color: #1a1a1a;">组长</div>
            <div style="font-weight: 700;font-size: 12px;text-align: left;color: #808080;">张小白，张三，李四</div>
          </el-col>
          <el-col :span="2">
            <div style="width: 43px;height: 43px;background: #236cff;border: 1px ;border-radius: 50%;float: right"><div style="font-weight: 700;font-size: 22px;text-align: center;padding-top: 4px;color: #fff;">副</div></div>
          </el-col>
          <el-col :span="4" style="margin-left: 8px">
            <div style="font-weight: 700;font-size: 16px;text-align: left;color: #1a1a1a;">副组长</div>
            <div style="font-weight: 700;font-size: 12px;text-align: left;color: #808080;">张小白，张三，李四</div>
          </el-col>
          <el-col :span="2">
            <div style="width: 43px;height: 43px;background: #236cff;border: 1px ;border-radius: 50%;float: right"><div style="font-weight: 700;font-size: 22px;text-align: center;padding-top: 4px;color: #fff;">联</div></div>
          </el-col>
          <el-col :span="4" style="margin-left: 8px">
            <div style="font-weight: 700;font-size: 16px;text-align: left;color: #1a1a1a;">联络员</div>
            <div style="font-weight: 700;font-size: 12px;text-align: left;color: #808080;">张小白，张三，李四</div>
          </el-col>
        </el-row>
      </el-col>

    </el-row>


    <!-- 搜索表单1 -->
    <el-form inline>
      <el-form-item >
        <img src="@/assets/组%20438.png" class="logo1">
        <div class="logo1-wenzi">招宣组成员</div>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button class="button1" type="primary" @click="importGroup">导出数据</el-button>
        <el-button class="button2" type="primary" @click="showAddDialog('添加招宣组')">
          <el-icon class="button2-1"><Plus /></el-icon>
          <div class="button2-2">编辑成员</div>
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 文章列表1 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="70" />
      <el-table-column label="姓名" width="150" prop="groupName"></el-table-column>
      <el-table-column label="工号" width="100" prop="ID"></el-table-column>
      <el-table-column label="所在单位" prop="leader"></el-table-column>
      <el-table-column label="职务" prop="area"></el-table-column>
      <el-table-column label="职称" prop="title"></el-table-column>
      <el-table-column label="籍贯" prop="hometown"></el-table-column>
      <el-table-column label="毕业中学" prop="graduation"></el-table-column>
      <el-table-column label="联系电话" prop="number"></el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>

    <!-- 分页条1 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>


    <!-- 搜索表单2 -->
    <el-form inline style="margin-top: 40px">
      <el-form-item >
        <img src="@/assets/组%20438.png" class="logo1">
        <div class="logo1-wenzi">关联招宣活动</div>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button class="button1" type="primary" @click="importGroup">导出数据</el-button>
        <el-button class="button2" type="primary" @click="showAddDialog('添加招宣组')">
          <el-icon class="button2-1"><Plus /></el-icon>
          <div class="button2-2">编辑成员</div>
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 文章列表2 -->
    <el-table :data="Data2" style="width: 100%">
      <el-table-column prop="date" label="序号" width="70" />
      <el-table-column prop="name" label="活动名称" width="180" />
      <el-table-column prop="year" label="招宣年度" width="180" />
      <el-table-column prop="address" label="活动区域" />
      <el-table-column prop="people" label="活动创建人" />
      <el-table-column prop="add" label="活动来源" />
    </el-table>

    <!-- 分页条2 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>


    <!-- 搜索表单3 -->
    <el-form inline style="margin-top: 40px">
      <el-form-item >
        <img src="@/assets/组%20438.png" class="logo1">
        <div class="logo1-wenzi">历年录取数据</div>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button class="button1" type="primary" @click="importGroup">导出数据</el-button>
        <el-button class="button2" type="primary" @click="showAddDialog('添加招宣组')">
          <el-icon class="button2-1"><Plus /></el-icon>
          <div class="button2-2">编辑成员</div>
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 文章列表3 -->
    <el-table :data="Data3" style="width: 100%">
      <el-table-column prop="date" label="序号" width="100" />
      <el-table-column prop="year" label="年份" width="500" />
      <el-table-column prop="num" label="人数" width="180" />

    </el-table>

    <!-- 分页条3 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
  </el-card>


  <!-- 搜索表单5 -->
  <el-form inline style="margin-top: 40px">
    <el-form-item >
      <div class="logo1-wenzi">历史记录</div>
    </el-form-item>
    <el-form-item >
      <el-button class="button5-1" type="primary" @click="showAddDialog('添加招宣组')">
        <img src="@/assets/倒序.png" class="button3-1">
        <div class="button5-2">倒序</div>
      </el-button>
      <el-button class="button5-1" type="primary" @click="showAddDialog('添加招宣组')">
        <el-icon class="button5-3"><ArrowUp /></el-icon>
        <div class="button5-2">收起</div>
      </el-button>
    </el-form-item>
  </el-form>

  <el-row >
    <el-col :span="1" style="margin-bottom: 8px;margin-left: 20px">
      <div style="width: 9px;height: 9px;background: #fff;border: 5px solid #266eff;border-radius: 30px"></div>
      <div style="width: 0;height: 60px;background: transparent;border: 1px solid #236cff;margin-left: 7px;margin-top: 4px"></div>
    </el-col>
    <el-col :span="20">
      <div class="span4">2023-03-24 17:23:35</div>
      <el-row style="margin-top: 20px">
        <el-col :span="1" style="margin-bottom: 20px" class="span5">
          由
        </el-col>
        <el-col :span="2" class="span5-2">
          张三
        </el-col>
        <el-col :span="2" class="span5">创建</el-col>
      </el-row>
    </el-col>
  </el-row>

  <el-row >
    <el-col :span="1" style="margin-bottom: 8px;margin-left: 20px">
      <div style="width: 9px;height: 9px;background: #fff;border: 5px solid #266eff;border-radius: 30px"></div>
      <div style="width: 0;height: 70px;background: transparent;border: 1px solid #236cff;margin-left: 7px;margin-top: 4px"></div>
    </el-col>
    <el-col :span="20">
      <div class="span4">2023-03-24 17:23:35</div>
      <el-row style="height: 20px;margin-top: 5px">
        <el-col :span="1" style="margin-bottom: 20px" class="span5">
          由
        </el-col>
        <el-col :span="2" class="span5-2">
          张三
        </el-col>
        <el-col :span="3" class="span5">添加招宣人员</el-col>
      </el-row>
      <div class="span4-2" style="margin: 10px 0px 20px 0">王二； 100001； 某某某某单位； 某某职务； 某职称； 湖北省； 武汉一中； 18300000000</div>
    </el-col>
  </el-row>

  <el-row >
    <el-col :span="1" style="margin-bottom: 20px;margin-left: 20px">
      <div style="width: 9px;height: 9px;background: #fff;border: 5px solid #266eff;border-radius: 30px"></div>
    </el-col>
    <el-col :span="20">
      <div class="span4">2023-03-24 17:23:35</div>
      <el-row style="margin-top: 10px">
        <el-col :span="1" style="margin-bottom: 10px;" class="span5">
          由
        </el-col>
        <el-col :span="2" class="span5-2">
          张三
        </el-col>
        <el-col :span="2" class="span5">发布活动</el-col>
      </el-row>
    </el-col>
  </el-row>
  <div style="margin-left: 6%">年份； 68人；</div>
</template>

<style scoped lang="scss">
.button1{
  width: 151px;
  height: 36px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #236cff;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #236cff;
}
.button2{
  width: 123px;
  height: 36px;
  border-radius: 5px;
  background: linear-gradient(130.33deg, #31efed 0%, #236cff 100%);
}
.button2-1{
  width: 16px;
  height: 16px;
  background: transparent;
}
.button2-2{
  font-family: "Source Han Sans CN";
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #fff;
}
.logo1-wenzi{
  font-family: "Source Han Sans SC Bold";
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  text-align: left;
  color: #000000d9;
}
.button5-1{
  width: 69px;
  height: 22px;
  border-radius: 11px;
  background: #fff;
  border: 0.5px solid #266eff;
}
.button5-2{
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 12px;
  text-align: right;
  color: #266eff;
}
.button5-3{
  width: 11.88px;
  height: 8.01px;
  color: #266eff;
}
.span5-2{
  width: 200px;
  height: 24px;
  text-align: center;
  border-radius: 12px;
  background: #bfd4fa;
  margin: 0px 10px;
}
</style>
